<template>
<div>
  <div>
     <el-row style="height: 89px; background-color: #00BBFF">
      <el-col :span="4" class="text-center pt-4 pb-3">
        <span class="fs-4">校园答疑互动平台</span>
      </el-col>
      <el-col :span="2" class="text-center pt-4 pb-4">
        <el-button type="primary" class="pt-3 pb-3 fs-4" round>首页</el-button>
      </el-col>
      <el-col :span="2" class="text-left pt-4 pb-4">
        <el-button type="primary" class="pt-3 pb-3 fs-4" round>提问吧</el-button>
      </el-col>
      <el-col :span="5" class="text-left pt-4 pb-4">
        <el-input placeholder="请输入搜索内容">
          <template #append>
            <el-button type="Primary">
              <el-icon><search /></el-icon>
            </el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="1" class="text-center pt-4 pb-4">
        <el-font class="fs-5">天气</el-font>
      </el-col>
      <el-col :span="2" class="text-center pt-2 pb-2">
        <el-font class="fs-6">今日</el-font>
      </el-col>
      <el-col :span="2" class="text-center pt-2 pb-2">
        <el-font class="fs-6">明日</el-font>
      </el-col>
      <el-col :span="2" class="text-center pt-4 pb-4">
        <div v-if="loginstatus">
        <el-font>欢迎您</el-font>
        <img :src="headUrl" style="width:6rem;heighr:6rem "  @click="this.$router.push('/')">
      </div>
      <div v-else> 
        <el-button type="primary" class="pt-3 pb-3 fs-4" round @click="this.$router.push('/login')">登录</el-button>
      </div>
      </el-col>
      <el-col :span="2" class="text-center pt-4 pb-4">
        <el-dropdown split-button type="primary" style="w-100">
          个人信息
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>详细信息</el-dropdown-item>
              <el-dropdown-item @click="this.$router.push('/person')">修改信息</el-dropdown-item>
              <el-dropdown-item>安全设置</el-dropdown-item>
              <el-dropdown-item @click="this.$router.push('/question')">我的提问</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
      <el-col :span="2" class="text-center pt-1 pb-2">
        <img src="@/assets/shouye.jpg" style="width: 5rem; height: 5rem">
      </el-col>
    </el-row>
  </div>
    <div class="backgroud_style">
     <div class="common-layout w-50 mx-auto" style="background-image: linear-gradient(to right,#ffa900,#66FFFF);">
    <el-container class="mt-5" >
      <el-header><el-row>
        <el-col :span="24" class="mx-auto text-center">
         <el-menu mode="horizontal" class="h-100 theme-head-right" style="background-image: linear-gradient(to right,#ffa900,#66FFFF);" 
                :router="true">
         <el-menu-item class="fs-3">添加新的提问</el-menu-item>
         <el-menu-item class="ms-auto"><el-icon><Close /></el-icon></el-menu-item>
         </el-menu>
        </el-col>
      </el-row ></el-header>
      <el-main>
        <div>邮箱</div>
        <div class="mt-2">
           <el-input v-model="mailbox" placeholder="请输入邮箱" />
       </div>
        <div>主题</div>
        <div class="mt-2">
             <el-select v-model="value" class="w-100" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
        </div>
        <div>正文</div>
        <div class="mt-2">
          <el-input
           v-model="textarea"
           :rows="2"
            type="textarea"
            placeholder="Please input"
           />
        </div>
      </el-main>
      <el-footer>
        <div>
          <el-menu class="h-100" :router="true" mode="horizontal" style="background-image: linear-gradient(to right,#ffa900,#66FFFF);">
          <el-menu-item type="primary" class="ms-auto"><el-button @click="noteAdd">保存</el-button></el-menu-item>
          <el-menu-item index="#"><el-button>关闭</el-button></el-menu-item>
          </el-menu>
        </div>
      </el-footer>
    </el-container>
  </div>
    </div>
  </div>
</template>


<script>
import {Close} from '@element-plus/icons-vue';

export default {
 name:"NoteAnxin",
 components:{
   Close,
   },
   data(){
     return{
       mailbox:null,
       textarea:null,
       value:null,
       options:[{ label:"主题一" },{ label:"主题二" },{ label:"主题三" }]
     }
   },

   methods:{
     noteAdd(){
            // this.$axios.get('/api/registry',this.registry)
            // .then(response =>{
            //    let data = response.data;
            //    if(data.code == 200){
            //       alert(data.msg);
            //        this.$router.push('/question')
            //    }else{
            //       alert(data.msg);
            //    }
            // })
             this.$router.push('/question')
     },

   },
  
}
</script>

<style scoped>
.backgroud_style{
  width: 100%;
  height: 100%;
  background-image: url("@/assets/shouye.jpg");
  position: fixed;
}


</style>